<template>
  <div>
    <ul class="container">
      <li
        v-for="item in brand"
        :key="item.id"
      >
        <van-image
          :src="item.brand_img"
          width="1.2rem"
          height="1.0rem"
          fit="fill"
        />
        <p style="font-size:10px;margin:0;line-height:0px">{{item.brand_name}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "FLPhone",
  data() {
    return {
      categoryid: "",
      brand: [],
    };
  },
  methods: {
    getbrand() {
      this.axios
        .post("apis/kuan_api/category.php", {
          brandid: this.$route.query.categoryid,
          code: 1,
        })
        .then((res) => {
          console.log(res.data.brand);
          this.brand = res.data.brand;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.categoryid = this.$route.query.categoryid;
    this.getbrand();
  },
};
</script>

<style scoped>
.container {
  writing-mode: vertical-lr;
  /* 内容从上到下垂直排列，下一垂直行位于上一行右侧 */
  height: 140px;
  /* 必须控制容器高度，宽度自适应 */
  font-size: 0;
  /* 子元素为行内块元素，需要设置父元素font-size为0，否则子元素会有间隙 */
  margin: 0;
  padding: 0;
}

.container li {
  display: inline-block;
  /*必须设置为行内块，否则会水平排列*/
  width: 70px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  writing-mode: horizontal-tb;
  /* 这里必须改成水平，否则文字显示方向不对*/
  margin: 0 10px 20px 0;
  color: #000;
  font-size: 40px;
  /* 必须重设字体大小,否则font-size为0 */
}
img {
  width: 100%;
}
</style>